<template>
  <div>
    <div style="width: 600px; float: left">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="地区-小区">
          <el-cascader
            v-model="value"
            :options="regionList"
            :props="defaultName"
            @change="handleChange"
          ></el-cascader>
          <el-select v-model="form.communityId" placeholder="请选择小区">
            <el-option
              v-for="item in plotList"
              :key="item.id"
              :label="item.communityName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="选择小区"> </el-form-item> -->
        <el-form-item label="户型-设施">
          <el-select v-model="form.specificationId" placeholder="请选择户型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="form.facilityId"
            multiple
            placeholder="请选择设施"
          >
            <el-option
              v-for="item in facilityList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="房屋设施"> </el-form-item> -->
        <el-form-item label="经纪人">
          <el-select v-model="form.brokerId" placeholder="请选择">
            <el-option
              v-for="item in brokerList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼层">
          <el-radio v-model="form.level" label="0">低</el-radio>
          <el-radio v-model="form.level" label="1">中</el-radio>
          <el-radio v-model="form.level" label="2">高</el-radio>
          <el-input
            v-model="form.rentHouses.floorNumber"
            placeholder="楼层数"
            style="width: 225px"
          ></el-input>
        </el-form-item>
        <el-form-item label="朝向-面积">
          <el-input
            v-model="form.orientation"
            style="width: 225px"
            placeholder="朝向"
          ></el-input>
          <el-input
            placeholder="面积m²"
            v-model="form.totalArea"
            style="width: 225px"
          >
            <template slot="append">m²</template>
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="总面积"> </el-form-item> -->
        <el-form-item label="详情地址">
          <el-input
            v-model="form.addressDesc"
            placeholder="请输入详情地址"
            style="width: 450px"
          ></el-input>
        </el-form-item>
      </el-form>

      <div style="height: 200px; width: 200px"><publicMap></publicMap></div>
    </div>

    <div style="width: 600px; float: left; margin-left: 30px">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="中介费">
          <el-input
            v-model="form.rentHouses.brokerCost"
            placeholder="请输入费用"
            style="width: 450px"
          ></el-input>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-radio v-model="form.rentHouses.paymentWay" label="1"
            >月租</el-radio
          >
          <el-radio v-model="form.rentHouses.paymentWay" label="2"
            >季租</el-radio
          >
        </el-form-item>
        <el-form-item label="押金">
          <el-input
            v-model="form.rentHouses.betMoney"
            placeholder="请输入押金"
            style="width: 450px"
          ></el-input>
        </el-form-item>
        <el-form-item label="租住详情">
          <el-input
            v-model="form.rentHouses.rentDisc"
            placeholder="租住详情"
            style="width: 450px"
          ></el-input>
        </el-form-item>
        <el-form-item label="可租期">
          <el-date-picker
            v-model="form.rentHouses.rebtTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="房屋品牌">
          <el-select v-model="form.rentHouses.brandId" placeholder="请选择">
            <el-option
              v-for="item in brandList"
              :key="item.id"
              :label="item.brandName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        {{ this.form.imageList }}
        <el-form-item label="房屋图片">
          <el-upload
            action="http://127.0.0.1:8080/broker/broker/BrokderOss"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="addHousesData">添加</el-button>
    </div>
  </div>
</template>
<script>
import { listFacility } from "@/api/attribute/facility";

import { listPlot } from "@/api/plot/plot";

import { listBroker } from "@/api/broker/broker";

import { regionListService } from "@/api/region/region";

import { addRentHousesService } from "@/api/houses/houses";

import { listBrand } from "@/api/brand/brand";
import publicMap from "./publicMap.vue";

export default {
  components: { publicMap },

  data() {
    return {
      defaultName: {
        value: "id",
        label: "name",
      }, //三级联动默认名称
      form: {
        facilityId: [], //房屋设施ID
        rentHouses: {}, //租房详情
        imageList: [], //房屋图片
      },
      facilityList: [], //设施数据
      plotList: [], //小区数据
      brokerList: [], //经纪人数据
      regionList: [], //地区数据
      brandList: [], //品牌数据
      //图片
      dialogImageUrl: "",
      dialogVisible: false,
      queryParams: {
        //查询条件 没用
        pageNum: 1,
        pageSize: null,
        name: null,
      },
    };
  },
  created() {
    this.getlistFacility(); //设施
    this.getListplot(); //小区
    this.getListBroker(); //经纪人
    this.getRegion(); //地区
    this.getBrandList(); //品牌
  },
  methods: {
    //添加租房列表信息
    addHousesData() {
      addRentHousesService(this.form).then((res) => {
        alert(res.data.msg);
        if (res.data.flag) {
          //租房信息添加成功
        }
      });
    },
    //上传成功回调图片
    handleAvatarSuccess(res, file) {
      this.form.imageList.push({ image: res.data });
    },
    //删除图片
    handleRemove(file, fileList) {
      console.log(file.response.data);
      for (let i = 0; i < this.form.imageList.length; i++) {
        if (this.form.imageList[i].url === file.response.data) {
          this.form.imageList.splice(i, 1);
          break; // 找到并删除后退出循环
        }
      }
    },

    //获取选中的地区
    handleChange(value) {
      this.form.provinceId = value[0];
      this.form.cityId = value[0];
      this.form.districtId = value[0];
    },

    //地区列表信息
    getRegion() {
      regionListService().then((response) => {
        console.log(response);
        this.regionList = response;
      });
    },

    //获取品牌
    getBrandList() {
      listBrand(this.queryParams).then((response) => {
        this.brandList = response.rows;
      });
    },

    //经纪人列表
    getListBroker() {
      listBroker(this.queryParams).then((response) => {
        this.brokerList = response.rows;
      });
    },
    //设施列表
    getlistFacility() {
      listFacility(this.queryParams).then((response) => {
        this.facilityList = response.rows;
      });
    },
    //小区列表
    getListplot() {
      listPlot(this.queryParams).then((response) => {
        this.plotList = response.rows;
      });
    },
  },
};
</script>
